<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>粒子电商管理系统</title>
    <link rel="stylesheet" href="https://s2.ssl.qhres2.com/static/56662140ef7d5d03.css">
    <link rel="stylesheet" href="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-100-M/font-awesome/6.0.0/css/all.min.css">
    <script src="js/axios.min.js"></script>
    <style>
        :root {
            --primary-dark: #1a237e;
            --primary-light: #3949ab;
            --accent: #ff6d00;
            --light-gray: #f5f5f5;
            --white: #ffffff;
            --text-dark: #212121;
            --text-light: #757575;
            --shadow-sm: 0 1px 3px rgba(0,0,0,0.12);
            --shadow-md: 0 4px 6px rgba(0,0,0,0.1);
            --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
        }

        body {
            font-family: 'Helvetica Neue', Arial, sans-serif;
            background-color: var(--light-gray);
            color: var(--text-dark);
            margin: 0;
            padding: 0;
            line-height: 1.6;
            overflow-x: hidden;
        }

        #particles-js {
            position: fixed;
            width: 100%;
            height: 100%;
            z-index: -1;
            background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-light) 100%);
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 2rem;
        }

        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1.5rem 0;
            margin-bottom: 2rem;
            border-bottom: 1px solid rgba(255,255,255,0.1);
        }

        .logo {
            font-size: 1.8rem;
            font-weight: 700;
            color: var(--white);
            text-decoration: none;
            display: flex;
            align-items: center;
        }

        .logo i {
            margin-right: 0.8rem;
            color: var(--accent);
        }

        .nav-links {
            display: flex;
            gap: 1.5rem;
        }

        .nav-link {
            color: var(--white);
            text-decoration: none;
            font-weight: 500;
            transition: var(--transition);
            padding: 0.5rem 1rem;
            border-radius: 4px;
        }

        .nav-link:hover {
            background-color: rgba(255,255,255,0.1);
            color: var(--accent);
        }

        .card {
            background-color: var(--white);
            border-radius: 8px;
            box-shadow: var(--shadow-sm);
            padding: 1.5rem;
            margin-bottom: 2rem;
            transition: var(--transition);
        }

        .card:hover {
            box-shadow: var(--shadow-md);
            transform: translateY(-2px);
        }

        .card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1.5rem;
            padding-bottom: 1rem;
            border-bottom: 1px solid var(--light-gray);
        }

        .card-title {
            font-size: 1.5rem;
            font-weight: 600;
            color: var(--primary-dark);
            margin: 0;
        }

        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0.6rem 1.2rem;
            border-radius: 4px;
            font-weight: 500;
            cursor: pointer;
            transition: var(--transition);
            border: none;
            font-size: 0.9rem;
        }

        .btn-primary {
            background-color: var(--accent);
            color: var(--white);
        }

        .btn-primary:hover {
            background-color: #ff8500;
        }

        .btn-outline {
            background-color: transparent;
            border: 1px solid var(--primary-light);
            color: var(--primary-light);
        }

        .btn-outline:hover {
            background-color: var(--primary-light);
            color: var(--white);
        }

        .btn-danger {
            background-color: #e53935;
            color: var(--white);
        }

        .btn-danger:hover {
            background-color: #c62828;
        }

        .btn i {
            margin-right: 0.5rem;
        }

        .table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 1rem;
        }

        .table th {
            text-align: left;
            padding: 1rem;
            background-color: var(--primary-dark);
            color: var(--white);
            font-weight: 500;
        }

        .table td {
            padding: 1rem;
            border-bottom: 1px solid var(--light-gray);
            vertical-align: middle;
        }

        .table tr:last-child td {
            border-bottom: none;
        }

        .table tr:hover td {
            background-color: rgba(25, 118, 210, 0.05);
        }

        .badge {
            display: inline-block;
            padding: 0.25rem 0.6rem;
            border-radius: 12px;
            font-size: 0.75rem;
            font-weight: 600;
            text-transform: uppercase;
        }

        .badge-success {
            background-color: #e8f5e9;
            color: #2e7d32;
        }

        .badge-warning {
            background-color: #fff8e1;
            color: #ff8f00;
        }

        .badge-danger {
            background-color: #ffebee;
            color: #c62828;
        }

        .form-group {
            margin-bottom: 1.5rem;
        }

        .form-label {
            display: block;
            margin-bottom: 0.5rem;
            font-weight: 500;
            color: var(--text-dark);
        }

        .form-control {
            width: 100%;
            padding: 0.75rem;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 1rem;
            transition: var(--transition);
        }

        .form-control:focus {
            outline: none;
            border-color: var(--primary-light);
            box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.2);
        }

        .modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.5);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1000;
            opacity: 0;
            visibility: hidden;
            transition: var(--transition);
        }

        .modal.active {
            opacity: 1;
            visibility: visible;
        }

        .modal-content {
            background-color: var(--white);
            border-radius: 8px;
            width: 90%;
            max-width: 600px;
            max-height: 90vh;
            overflow-y: auto;
            box-shadow: var(--shadow-md);
            transform: translateY(-20px);
            transition: var(--transition);
        }

        .modal.active .modal-content {
            transform: translateY(0);
        }

        .modal-header {
            padding: 1.5rem;
            border-bottom: 1px solid var(--light-gray);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .modal-title {
            font-size: 1.5rem;
            font-weight: 600;
            margin: 0;
            color: var(--primary-dark);
        }

        .modal-close {
            background: none;
            border: none;
            font-size: 1.5rem;
            cursor: pointer;
            color: var(--text-light);
            transition: var(--transition);
        }

        .modal-close:hover {
            color: var(--text-dark);
        }

        .modal-body {
            padding: 1.5rem;
        }

        .modal-footer {
            padding: 1.5rem;
            border-top: 1px solid var(--light-gray);
            display: flex;
            justify-content: flex-end;
            gap: 1rem;
        }

        .alert {
            padding: 1rem;
            border-radius: 4px;
            margin-bottom: 1.5rem;
        }

        .alert-success {
            background-color: #e8f5e9;
            color: #2e7d32;
            border-left: 4px solid #2e7d32;
        }

        .alert-danger {
            background-color: #ffebee;
            color: #c62828;
            border-left: 4px solid #c62828;
        }

        .empty-state {
            text-align: center;
            padding: 3rem;
            color: var(--text-light);
        }

        .empty-state i {
            font-size: 3rem;
            color: var(--primary-light);
            margin-bottom: 1rem;
        }

        .empty-state p {
            font-size: 1.1rem;
            margin-bottom: 1.5rem;
        }

        .product-image {
            width: 60px;
            height: 60px;
            object-fit: cover;
            border-radius: 4px;
        }

        .actions {
            display: flex;
            gap: 0.5rem;
        }

        @media (max-width: 768px) {
            .container {
                padding: 1rem;
            }

            .header {
                flex-direction: column;
                align-items: flex-start;
                gap: 1rem;
            }

            .nav-links {
                width: 100%;
                overflow-x: auto;
                padding-bottom: 0.5rem;
            }

            .table {
                display: block;
                overflow-x: auto;
            }

            .modal-content {
                width: 95%;
            }
        }

        /* 粒子动画样式 */
        .particles-js-canvas-el {
            position: absolute;
            top: 0;
            left: 0;
        }

        /* 淡入动画 */
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        .fade-in {
            animation: fadeIn 0.5s ease-out forwards;
        }

        /* 悬停效果 */
        .hover-scale {
            transition: transform 0.3s ease;
        }

        .hover-scale:hover {
            transform: scale(1.02);
        }
    </style>
</head>
<body>
    <div id="particles-js"></div>
    
    <div class="container">
        <header class="header fade-in">
            <a href="#" class="logo">
                <i class="fas fa-shopping-bag"></i>
                <span>粒子电商管理系统</span>
            </a>
            <nav class="nav-links">
                <a href="#" class="nav-link active"><i class="fas fa-home"></i> 首页</a>
                <a href="#" class="nav-link"><i class="fas fa-box-open"></i> 商品管理</a>
                <a href="#" class="nav-link"><i class="fas fa-chart-line"></i> 数据分析</a>
                <a href="#" class="nav-link"><i class="fas fa-cog"></i> 设置</a>
            </nav>
        </header>

        <main>
            <div class="card fade-in hover-scale">
                <div class="card-header">
                    <h2 class="card-title"><i class="fas fa-boxes"></i> 商品列表</h2>
                    <button id="addProductBtn" class="btn btn-primary">
                        <i class="fas fa-plus"></i> 添加商品
                    </button>
                </div>
                
                <div class="card-body">
                    <div id="alertContainer"></div>
                    
                    <table class="table">
                        <thead>
                            <tr>
                                <th>商品图片</th>
                                <th>商品名称</th>
                                <th>价格</th>
                                <th>库存</th>
                                <th>状态</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody id="productTableBody">
                            <!-- 商品数据将通过JavaScript动态加载 -->
                            <tr>
                                <td colspan="6" class="empty-state">
                                    <i class="fas fa-box-open"></i>
                                    <p>暂无商品数据</p>
                                    <button id="addFirstProductBtn" class="btn btn-primary">
                                        <i class="fas fa-plus"></i> 添加第一个商品
                                    </button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </main>
    </div>

    <!-- 添加/编辑商品模态框 -->
    <div id="productModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title" id="modalTitle">添加商品</h3>
                <button class="modal-close">&times;</button>
            </div>
            <div class="modal-body">
                <form id="productForm">
                    <input type="hidden" id="productId">
                    <div class="form-group">
                        <label for="productName" class="form-label">商品名称</label>
                        <input type="text" id="productName" class="form-control" required>
                    </div>
                    <div class="form-group">
                        <label for="productPrice" class="form-label">价格</label>
                        <input type="number" id="productPrice" class="form-control" min="0" step="0.01" required>
                    </div>
                    <div class="form-group">
                        <label for="productStock" class="form-label">库存</label>
                        <input type="number" id="productStock" class="form-control" min="0" required>
                    </div>
                    <div class="form-group">
                        <label for="productStatus" class="form-label">状态</label>
                        <select id="productStatus" class="form-control" required>
                            <option value="active">上架</option>
                            <option value="inactive">下架</option>
                            <option value="soldout">售罄</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="productImage" class="form-label">商品图片</label>
                        <input type="file" id="productImage" class="form-control" accept="image/*">
                        <small class="text-muted">支持JPG, PNG格式，建议尺寸300x300像素</small>
                    </div>
                    <div class="form-group">
                        <label for="productDescription" class="form-label">商品描述</label>
                        <textarea id="productDescription" class="form-control" rows="3"></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button class="btn btn-outline modal-close">取消</button>
                <button id="saveProductBtn" class="btn btn-primary">保存</button>
            </div>
        </div>
    </div>

    <!-- 确认删除模态框 -->
    <div id="confirmModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title">确认删除</h3>
                <button class="modal-close">&times;</button>
            </div>
            <div class="modal-body">
                <p>您确定要删除这个商品吗？此操作无法撤销。</p>
            </div>
            <div class="modal-footer">
                <button class="btn btn-outline modal-close">取消</button>
                <button id="confirmDeleteBtn" class="btn btn-danger">确认删除</button>
            </div>
        </div>
    </div>

    <script src="js/three.min.js"></script>
    
 

    <script>
        // 模拟数据库
        let products = [];
        let currentProductId = null;
        
        // 初始化api
        const API_BASE_URL = 'http://127.0.0.1:8000/api/products/'

        // DOM元素
        const productTableBody = document.getElementById('productTableBody');
        const productModal = document.getElementById('productModal');
        const confirmModal = document.getElementById('confirmModal');
        const productForm = document.getElementById('productForm');
        const addProductBtn = document.getElementById('addProductBtn');
        const addFirstProductBtn = document.getElementById('addFirstProductBtn');
        const saveProductBtn = document.getElementById('saveProductBtn');
        const confirmDeleteBtn = document.getElementById('confirmDeleteBtn');
        const modalCloseButtons = document.querySelectorAll('.modal-close');
        const alertContainer = document.getElementById('alertContainer');

        // 初始化粒子动画
        function initParticles() {
            const scene = new THREE.Scene();
            const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
            const renderer = new THREE.WebGLRenderer({ alpha: true });
            renderer.setSize(window.innerWidth, window.innerHeight);
            document.getElementById('particles-js').appendChild(renderer.domElement);

            // 创建粒子
            const particlesGeometry = new THREE.BufferGeometry();
            const particlesCount = 500;
            
            const posArray = new Float32Array(particlesCount * 3);
            
            for(let i = 0; i < particlesCount * 3; i++) {
                posArray[i] = (Math.random() - 0.5) * 10;
            }
            
            particlesGeometry.setAttribute('position', new THREE.BufferAttribute(posArray, 3));
            
            const particlesMaterial = new THREE.PointsMaterial({
                size: 0.02,
                color: 0xffffff,
                transparent: true,
                opacity: 0.8
            });
            
            const particlesMesh = new THREE.Points(particlesGeometry, particlesMaterial);
            scene.add(particlesMesh);
            
            camera.position.z = 3;
            
            function animate() {
                requestAnimationFrame(animate);
                
                particlesMesh.rotation.x += 0.0005;
                particlesMesh.rotation.y += 0.0005;
                
                renderer.render(scene, camera);
            }
            
            animate();

            // 窗口大小调整时重新设置渲染器尺寸
            window.addEventListener('resize', () => {
                camera.aspect = window.innerWidth / window.innerHeight;
                camera.updateProjectionMatrix();
                renderer.setSize(window.innerWidth, window.innerHeight);
            });
        }

        // 显示提示信息
        function showAlert(message, type = 'success') {
            const alert = document.createElement('div');
            alert.className = `alert alert-${type}`;
            alert.innerHTML = `
                <i class="fas fa-${type === 'success' ? 'check-circle' : 'exclamation-circle'}"></i>
                ${message}
            `;
            
            alertContainer.appendChild(alert);
            
            setTimeout(() => {
                alert.classList.add('fade-out');
                setTimeout(() => alert.remove(), 300);
            }, 3000);
        }
        // 从api 获取商品数据
        async function fetchProducts(){
            try{
                const response = await axios.get(API_BASE_URL);
                products = response.data;
                renderProductTable();
            }
            catch(error){
                console.error("获取商品数据失败", error);
            }
        }


        // 渲染商品表格
        function renderProductTable() {
            if (products.length === 0) {
                productTableBody.innerHTML = `
                    <tr>
                        <td colspan="6" class="empty-state">
                            <i class="fas fa-box-open"></i>
                            <p>暂无商品数据</p>
                            <button id="addFirstProductBtn" class="btn btn-primary">
                                <i class="fas fa-plus"></i> 添加第一个商品
                            </button>
                        </td>
                    </tr>
                `;
                
                document.getElementById('addFirstProductBtn').addEventListener('click', openAddProductModal);
                return;
            }
            
            let html = '';
            
            products.forEach(product => {
                let statusBadge = '';
                if (product.is_active === 'true') {
                    statusBadge = '<span class="badge badge-success">上架</span>';
                } else if (product.is_active === 'false') {
                    statusBadge = '<span class="badge badge-warning">下架</span>';
                } else {
                    statusBadge = '<span class="badge badge-danger">售罄</span>';
                }
                
                html += `
                    <tr data-id="${product.id}">
                        <td>
                            <img src="${product.cover || 'https://via.placeholder.com/60'}" alt="${product.name}" class="product-image">
                        </td>
                        <td>${product.name}</td>
                        <td>¥${product.price}</td>
                        <td>${product.stock}</td>
                        <td>${statusBadge}</td>
                        <td>
                            <div class="actions">
                                <button class="btn btn-outline edit-product" data-id="${product.id}">
                                    <i class="fas fa-edit"></i> 编辑
                                </button>
                                <button class="btn btn-danger delete-product" data-id="${product.id}">
                                    <i class="fas fa-trash"></i> 删除
                                </button>
                            </div>
                        </td>
                    </tr>
                `;
            });
            
            productTableBody.innerHTML = html;
            
            // 添加事件监听器
            document.querySelectorAll('.edit-product').forEach(btn => {
                btn.addEventListener('click', () => openEditProductModal(btn.dataset.id));
            });
            
            document.querySelectorAll('.delete-product').forEach(btn => {
                btn.addEventListener('click', () => openConfirmDeleteModal(btn.dataset.id));
            });
        }

        // 打开添加商品模态框
        function openAddProductModal() {
            document.getElementById('modalTitle').textContent = '添加商品';
            productForm.reset();
            currentProductId = null;
            productModal.classList.add('active');
        }

        // 打开编辑商品模态框
        function openEditProductModal(id) {
            const product = products.find(p => p.id === id);
            if (!product) return;
            
            document.getElementById('modalTitle').textContent = '编辑商品';
            document.getElementById('productId').value = product.id;
            document.getElementById('productName').value = product.name;
            document.getElementById('productPrice').value = product.price;
            document.getElementById('productStock').value = product.stock;
            document.getElementById('productStatus').value = product.status;
            document.getElementById('productDescription').value = product.description || '';
            
            currentProductId = id;
            productModal.classList.add('active');
        }

        // 打开确认删除模态框
        function openConfirmDeleteModal(id) {
            currentProductId = id;
            confirmModal.classList.add('active');
        }

        // 保存商品
        function saveProduct() {
            const id = document.getElementById('productId').value;
            const name = document.getElementById('productName').value;
            const price = parseFloat(document.getElementById('productPrice').value);
            const stock = parseInt(document.getElementById('productStock').value);
            const status = document.getElementById('productStatus').value;
            const description = document.getElementById('productDescription').value;
            const imageFile = document.getElementById('productImage').files[0];
            
            if (!name || isNaN(price) || isNaN(stock)) {
                showAlert('请填写所有必填字段', 'danger');
                return;
            }
            
            let imageUrl = '';
            if (imageFile) {
                // 实际项目中应该上传到服务器并获取URL
                imageUrl = URL.createObjectURL(imageFile);
            }
            
            if (id) {
                // 更新现有商品
                const index = products.findIndex(p => p.id === id);
                if (index !== -1) {
                    products[index] = {
                        ...products[index],
                        name,
                        price,
                        stock,
                        status,
                        description,
                        image: imageUrl || products[index].image
                    };
                    
                    showAlert('商品更新成功');
                }
            } else {
                // 添加新商品
                const newProduct = {
                    id: Date.now().toString(),
                    name,
                    price,
                    stock,
                    status,
                    description,
                    image: imageUrl,
                    createdAt: new Date().toISOString()
                };
                
                products.unshift(newProduct);
                showAlert('商品添加成功');
            }
            
            renderProductTable();
            productModal.classList.remove('active');
        }

        // 删除商品
        function deleteProduct() {
            products = products.filter(p => p.id !== currentProductId);
            showAlert('商品已删除');
            renderProductTable();
            confirmModal.classList.remove('active');
        }

        // 事件监听器
        addProductBtn.addEventListener('click', openAddProductModal);
        saveProductBtn.addEventListener('click', saveProduct);
        confirmDeleteBtn.addEventListener('click', deleteProduct);

        modalCloseButtons.forEach(button => {
            button.addEventListener('click', () => {
                productModal.classList.remove('active');
                confirmModal.classList.remove('active');
            });
        });

        // 点击模态框外部关闭
        [productModal, confirmModal].forEach(modal => {
            modal.addEventListener('click', (e) => {
                if (e.target === modal) {
                    modal.classList.remove('active');
                }
            });
        });

        // 初始化
        document.addEventListener('DOMContentLoaded', () => {
            initParticles();
            fetchProducts();
        });
    </script>
</body>
</html>



